<template>
    <div id="sale-after">
        <main class="pl13-pt13">
            <h1 class="mt30 f16">售后类型</h1>
            <picker @change="bindPickerChange" :value="index" :range="array">
              <view class="picker flex align-center mt5">
                <span class="flex1">{{array[index]}}</span><span class="iconfont">&#xe694;</span>
              </view>
            </picker>
            <dl class="mt5">
                <dt>
                    <p class="f16">共计<span style="color:#FF5001;">{{goods.goodMounts}}</span>件商品</p>
                    <p class="f14 tr" style="color:#FF5001;">待收货</p>
                </dt>
                <dd v-for="(good, item) in goods" :key="good.index" v-if="item < showGoods">
                    <img :src="good.imgs"/>
                    <section class="pl10 tl">
                        <h1>{{good.nam}}</h1>
                        <p>{{good.selectGuige}}</p>
                    </section>
                    <section class="tr" style="flex: 1;">
                        <h1><span>￥</span>{{good.originalprice}}</h1>
                        <p><span>x</span>{{good.counts}}</p>
                    </section>
                </dd>
            </dl>
            <aside @click="showMore">
                <i class="iconfont">{{text}}</i>
            </aside>
            <h1 class="mt15 f16">退款金额<span class="f13 pl5">(最大退款金额：<span style="color: #FF2B04;">￥52.03</span>)</span></h1>
            <i-input class="mt5" type="text" :value="formInline" placeholder="退回金额" i-class="picker"></i-input>
            <!--<h1 class="mt15 f16">退回方式</h1>
            <picker @change="bindPickerChangeWay" :value="indexWay" :range="arrayWay">
              <view class="picker flex align-center mt5">
                <span class="flex1">{{arrayWay[indexWay]}}</span><span class="iconfont">&#xe694;</span>
              </view>
            </picker>-->
            <h1 class="mt15 f16">退款说明</h1>
            <section class="evaluation">
               <i class="iconfont" @tap="chooseImage">&#xe631;</i>
              <div class="flex align-center">
                <div v-for="item in imgSrc" :key="item.index" v-if="imgSrc.length > 0">
                  <img :src="item" style="border-radius: 2px; width: 40px; height: 40px; margin-right: 2px;"/>
                </div>
              </div>
              <textarea class="f15" v-model="formItem.textarea" placeholder="请输入您的退款原因" style="height: 100px;"></textarea>
            </section>
        </main>
       <footer>
             <button @click="afterSale" class="order-button" style="background: #41B962;border-color: #41B962; color: #fff;">确定</button>
             <button  class="order-button" style="background: #E2E2E2;border-color: #E2E2E2; color: #646464;">取消</button>
      </footer>
    </div>
</template>

<script type="ECMAScript 6">
    let datas = require('../../../../../data');
    export default {
        name: 'sale-after',
        data () {
            return {
                index: 0,
                imgSrc: [],
                array: ['退款退货', '退款', '退货'],
                formItem: {
                    select: '退款退货',
                    ganhui: {},
                    textarea: ''
                },
                indexWay: 0,
                arrayWay: ['原路退回', '原路退回', '原路退回'],
                goods: '',
                showGoods: 3,
                isShow: false,
                text: '',
                formInline: '￥52',
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: []
            };
        },
        methods: {
            chooseImage () {
                wx.chooseImage({
                  count: 4, // 最多可以选择的图片张数，默认9
                  sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
                  sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
                  success: res =>{
                    // success
                    this.imgSrc.push(res.tempFilePaths);
                  },
                  fail: () => {
                    // fail
                  },
                  complete: () => {
                    // complete
                  }
                });
            },
            bindPickerChange (e) {
              console.log(e);
              this.index = e.mp.detail.value;
            },
            bindPickerChangeWay (e) {
              this.indexWay = e.mp.detail.value;
            },
            showMore () {
                this.isShow = !this.isShow;
                this.showGoods = this.isShow ? 3 : this.goods.length;
                this.text = this.isShow ? '' : '';
            },
            /* handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            } */
        },
        created () {
            this.goods = datas.goods;
        }
    };
</script>

<style lang="stylus">
    #sale-after
        main
            padding-bottom 70px;
            dl
                background #fff;
                dt
                    display flex; align-items center; height 40px; line-height 40px; padding 0 13px;border-bottom 1px solid #E9E9E9;
                    p
                        flex 1;
                dd
                    margin 0 13px; padding 10px 0;display flex; border-bottom 1px solid #E9E9E9;
                    img
                        width 50px;height 50px;
                    section
                        h1
                            font-size 14px;
                            span
                                font-size 9px;
                        p
                            margin-top 8px; font-size 12px; color #A2A2A2;
                            span
                                font-size 9px;
                dd:last-of-type
                    border-bottom-color transparent;
            aside
                text-align center; display block; width 100%; height 40px; border-top 1px solid #E9E9E9; background #fff;
                i
                    line-height 40px;
            section
                padding 0 13px; background #fff; border-radius 2px;
            .evaluation
                padding 13px;
        footer
            position fixed; bottom 0; display flex; align-items center; padding 12px; background #fff;border-top 1px solid #E9E9E9; width 93vw;
            .order-button
               height 40px; line-height 40px; border-radius 0; min-width 70px; flex 1; margin-right 10px; font-size 18px;
            .order-button:last-of-type
                margin 0;
    .picker
       height 40px!important; border-radius 2px!important; font-size 13px!important; color #767676!important; padding 0 13px!important; background #fff; margin-top 5px;
</style>
